<template>
	<el-dialog
		:title="title"
		:visible.sync="dialogVisible"
		width="40%"
		:before-close="dialogBeforeClose"
		:close-on-click-modal="false"
		append-to-body
	>
		<el-form
			ref="form"
			:model="form"
			:rules="rules"
			label-width="80px"
			:inline="false"
			size="normal"
		>
			<el-form-item label="表单名称" prop="formName">
				<el-input v-model="form.formName"></el-input>
			</el-form-item>
			<el-form-item label="类型" prop="type">
				<el-select v-model="form.type" style="width: 100%">
					<el-option
						v-for="item in typeOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="表单类型" prop="formType">
				<el-select v-model="form.formType" style="width: 100%">
					<el-option
						v-for="item in formTypeOptions"
						:key="item.value"
						:label="item.display"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="是否启用" prop="whetherEnable">
				<el-select v-model="form.whetherEnable" style="width: 100%">
					<el-option
						v-for="item in whetherEnableOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="项目" label-width="85px">
				<el-select
					v-model="form.itemName"
					style="width: 100%"
					filterable
					remote
					reserve-keyword
					placeholder="请输入关键词"
					:remote-method="remoteMethod"
					:loading="loading"
					@change="change"
					@focus="focus"
				>
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.label"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="备注">
				<el-input
					v-model="form.remarks"
					placeholder="请输入备注"
					type="textarea"
					:autosize="{ minRows: 2, maxRows: 4 }"
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="onSubmit">{{
					typeText[type]
				}}</el-button>
				<el-button
					v-if="type == 2"
					type="primary"
					size="small"
					@click="handlerEdit"
					>编辑表单</el-button
				>
				<el-button size="small" @click="dialogBeforeClose">取消</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script>
import { getPriceList } from '@/http/api'
export default {
	props: {
		title: {
			type: String,
			default: '',
		},
		dialogVisible: Boolean,
		type: {
			type: Number,
			default: null,
		},
		formTypeOptions: {
			type: Array,
			default: () => [],
		},
		formDialog: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			typeText: {
				1: '立即创建',
				2: '保存',
			},
			rules: {
				formName: [
					{ required: true, message: '请输入表单名称', trigger: 'blur' },
				],
				whetherEnable: [
					{ required: true, message: '请选择是否启用', trigger: 'change' },
				],
				type: [{ required: true, message: '请选择类型', trigger: 'change' }],
				formType: [
					{ required: true, message: '请选择表单类型', trigger: 'change' },
				],
			},
			whetherEnableOptions: [
				{
					value: '1',
					label: '否',
				},
				{
					value: '0',
					label: '是',
				},
			],
			typeOptions: [
				{
					value: '0',
					label: 'PC',
				},
				{
					value: '1',
					label: 'APP',
				},
			],
			options: [],
			value: [],
			list: [],
			loading: false,
			states: [],
		}
	},
	computed: {
		form() {
			return this.formDialog
		},
	},
	mounted() {},
	methods: {
		remoteMethod(query) {
			if (query != '') {
				this.loading = true
				getPriceList({ itemCodeOrName: query, itemClass: 'C' }).then(
					({ data }) => {
						this.states = data.data == null ? [] : data.data
						this.loading = false
						this.valuation()
						this.options = this.list
					},
				)
			} else {
				this.options = []
			}
		},
		valuation() {
			this.list = this.states.map(item => {
				return {
					value: `${item.itemCode}`,
					label: `${item.itemName}${this.itemValueFun(
						item.itemSpec,
					)}${this.itemValueFun(item.units)}${this.itemValueFun(item.price)}`,
				}
			})
		},
		itemValueFun(val) {
			return val == '' || val == '/' ? '' : '|' + val
		},
		change() {
			this.form.itemName = this.options[0].label
			this.form.itemCode = this.options[0].value
		},
		focus() {
			console.log('1')
		},
		dialogBeforeClose() {
			this.$refs.form.clearValidate()
			this.$emit('update:dialogVisible', false)
		},
		onSubmit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.$emit('submit', this.form, this.type)
					this.dialogBeforeClose()
				}
			})
		},
		handlerEdit() {
			this.$emit('editForm', this.formDialog.id, this.formDialog.type)
		},
	},
}
</script>

<style lang="scss" scoped></style>
